<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>Vue笔记（4） | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="
vue组件间通讯 方式总结









1. 对外参数 props 父=&gt;子
2. 找爹$parent $children 子=&gt;父  父=&gt;子
3. 实例名称 $refs 父=&gt;子
4. 事件 $emit ..." />
    <meta name="keywords" content="Vue笔记" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">Vue笔记（4）</h2>
            <div class="post-date">2020-06-02
            
                
                  <a href="https://shixixiyue.gitee.io/tag/TyVX6hfCJ/" class="tag">
                    Vue笔记
                  </a>
                
            </div>
            
            <div class="post-content" v-pre>
              <blockquote>
<p>vue组件间通讯 方式总结</p>
</blockquote>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#1-%E5%AF%B9%E5%A4%96%E5%8F%82%E6%95%B0-props-%E7%88%B6%E5%AD%90">1. 对外参数 props <code>父=&gt;子</code></a></li>
<li><a href="#2-%E6%89%BE%E7%88%B9parent-children-%E5%AD%90%E7%88%B6-%E7%88%B6%E5%AD%90">2. 找爹$parent $children <code>子=&gt;父  父=&gt;子</code></a></li>
<li><a href="#3-%E5%AE%9E%E4%BE%8B%E5%90%8D%E7%A7%B0-refs-%E7%88%B6%E5%AD%90">3. 实例名称 $refs <code>父=&gt;子</code></a></li>
<li><a href="#4-%E4%BA%8B%E4%BB%B6-emit-on-%E5%AD%90%E7%88%B6">4. 事件 $emit $on <code>子=&gt;父</code></a></li>
<li><a href="#5-%E5%85%AC%E4%BA%A4-bus">5. 公交 Bus</a></li>
<li><a href="#6-%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5-provide-inject-%E7%88%B6%E5%AD%90">6. 依赖注入 provide inject <code>父=&gt;子</code></a></li>
<li><a href="#7-vuex-%E5%85%A8%E5%B1%80%E7%8A%B6%E6%80%81%E6%9C%BA-%E9%87%8D">7. Vuex 全局状态机 <code>重</code></a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<h4 id="1-对外参数-props-父子">1. 对外参数 props <code>父=&gt;子</code></h4>
<p>子组件声明</p>
<pre><code>//第一种写法
props:[&quot;data1&quot;,&quot;data2&quot;] //两个属性
</code></pre>
<pre><code>//第二种写法
props:{
   data1:String//名称:数据类型 
}

//第三种写法
props:{
   data1:{//名称
       type:String,
       default:()=&gt;&quot;&quot;//默认值
   }
}

//第四种写法
props:{
   data1:{//名称
       type:[String,Array] //类型
       default(){
           return [];//Array或Object返回值 必须是方法 return
       } //默认值
   }
}
</code></pre>
<p>父组件 实例标签上应用</p>
<pre><code>&lt;组件名 data1=&quot;xxx&quot;&gt;&lt;/组件名&gt;
&lt;组件名 :data1=&quot;xxx&quot;&gt;&lt;/组件名&gt;
</code></pre>
<h4 id="2-找爹parent-children-子父-父子">2. 找爹$parent $children <code>子=&gt;父  父=&gt;子</code></h4>
<p>只找到上（下）级组件 [自定组件又包含了其他组件，子组件作为插槽<slot></slot> 只找到最近组件]</p>
<p>找到头是 $root</p>
<p>不适合多层嵌套</p>
<pre><code>this.$parent.xxx //.$refs//$el//找爹
</code></pre>
<h4 id="3-实例名称-refs-父子">3. 实例名称 $refs <code>父=&gt;子</code></h4>
<p>只会在绘制（渲染）完成后生效，并且不是响应式，避免在计算属性中访问</p>
<p>注册 实例上：</p>
<pre><code>&lt;组件名 ref=&quot;zujian1&quot;&gt;&lt;/组件名&gt;
</code></pre>
<p>使用：</p>
<pre><code>this.$refs.zujian1 //.$refs[&quot;zujian1&quot;]
</code></pre>
<pre><code>//如果有动态改变 影响渲染 需要配合nextTick
 this.$nextTick(() =&gt; {
   this.$refs.zujian1.$el //$data //fn() 
 })
</code></pre>
<h4 id="4-事件-emit-on-子父">4. 事件 $emit $on <code>子=&gt;父</code></h4>
<p>子组件 触发</p>
<pre><code>this.$emit('事件名称',参数1,参数2...) //触发事件
</code></pre>
<p>父组件 注册 实例上</p>
<pre><code>&lt;组件名 @事件名称=&quot;方法&quot;&gt;&lt;/组件名&gt;
...

方法(参数1,...ags){ //参数

}
</code></pre>
<p><em>$listeners</em><br>
多层组件使用 父组件直接注册到深层组件</p>
<p>子组件 继承传递</p>
<pre><code>v-on=&quot;$listeners&quot;
</code></pre>
<h4 id="5-公交-bus">5. 公交 Bus</h4>
<p>全局</p>
<pre><code>const bus = new Vue();
bus.$emit();
</code></pre>
<h4 id="6-依赖注入-provide-inject-父子">6. 依赖注入 provide inject <code>父=&gt;子</code></h4>
<p>父组件注册注入</p>
<pre><code>  provide() {
    return {//必须要返回
      AssetA1: this//参数名 : [方法,对象,属性]
    };
  },
</code></pre>
<p>所有子组件 都可以引用</p>
<pre><code>inject: [&quot;AssetA1&quot;, &quot;thisdialog&quot;] //注意名称
...
this.thisdialog.close()
</code></pre>
<h4 id="7-vuex-全局状态机-重">7. Vuex 全局状态机 <code>重</code></h4>
<p><em>modules</em> <em>mutations</em> <em>actions</em> <em>getters</em> <em>state</em></p>
<pre><code> this.$store.dispatch(&quot;TabView/cachedViews&quot;, xxx);//调用
</code></pre>
<pre><code>  computed: {//计算属性
    getxxx() {
      const name = this.$store.getters[&quot;TabView/cachedViews&quot;];//值改变了
      return name.toString();
    },
  }
</code></pre>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/TyVX6hfCJ/" class="tag">
                    Vue笔记
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/vue-bi-ji-3/">
                  <h3 class="post-title">
                    Vue笔记（3）
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
